<template>
    <el-dialog v-model="visible" title="收藏联系人" width="42%" @open="init" @closed="closed" :close-on-press-escape="false">
        <el-form :inline="true"
                 ref="formRef"
                 :model="obj"
                 :rules="rules"
                 label-position="left" label-width="100px" label-suffix="："
        >
            <el-form-item prop="groupId" label="选择分组">
                <el-radio-group v-model="obj.groupId">
                    <el-radio :label="item.id" size="large" border v-for="(item) in this.$store.state.userContactsGroup" title="aaaa" :disabled="joinedGroups.includes(item.id)">{{item.groupName}}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="submit">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {
    addUserCollectContact,
    queryJoinedGroup,
    queryUserCollectContact
} from "../../../../network/sys/contacts-group-detail";
import {queryUserContactsGroup} from "../../../../network/sys/contacts-group";
import {ElMessage} from "element-plus";

export default {
    name: "CollectContactForm",
    emits:['refresh-data'],
    data(){
        return{
            visible: false,
            obj: {
                groupId: null,
                empIds: []
            },
            rules: {
                groupId: [
                    {required: true,message: '请选择要加入的分组',trigger: 'blur'}
                ],
                empIds: []
            },
            joinedGroups:[]
        }
    },
    methods: {
        submit(){
            this.$refs.formRef.validate((valid)=>{
                if(valid){
                    addUserCollectContact(this.obj).then(vo=>{
                        this.$response.handle({
                            data: vo,
                            success: '添加成功',
                            successFn: ()=>{
                                this.visible = false;
                                if(this.$store.state.userGroupContacts.length!==0){
                                    let userGroupContacts = [];
                                    queryUserCollectContact().then(vo=>{
                                        userGroupContacts = vo.data;
                                    })
                                    this.$store.commit('setUserGroupContacts',userGroupContacts);
                                }
                            },
                            log: '收藏用户结果：'
                        })
                    })
                }else{
                    ElMessage.error('请先完成表单!');
                }
            })
        },
        setEmpIds(empIds){
            this.obj.empIds = empIds;
        },
        init(){
            if(this.$store.state.userContactsGroup.length===0){
                queryUserContactsGroup().then(vo=>{
                    console.log('用户组数据',vo);
                    this.$store.commit('setUserContactsGroup',vo.data);
                })
            }
            queryJoinedGroup(this.obj.empIds[0]).then(vo=>{
                // console.log('已加入的群组：',vo);
                this.joinedGroups = vo.data;
            })
        },
        closed(){
            this.$refs.formRef.clearValidate();
            this.$refs.formRef.resetFields();
            Object.assign(this.obj,this.$options.data.call(this).obj);
        }
    }
}
</script>

<style scoped>

</style>